<template>
  <div class="dingjin">

<!--    <div class="yingfu">-->
<!--      <span>应付金额：</span><span style="text-decoration: line-through">￥{{ car.price }}元</span>-->
<!--    </div>-->
    <div class="yingfu">
      <span>预付金额：</span><span>￥{{ this.$root.order.preparidAmount }}元</span>
    </div>
    <div class="yingfu">
      <span>实付金额：</span><span>￥{{ price() }}元</span>
    </div>

    <van-radio-group v-model="radio">
      <ul class="fuzhang">
        <li>
          <img src="../../../assets/dingdanxinxi/kehuyue.jpg" alt="" />
          <span>{{ fukuan[0].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="账户余额"
            name="账户余额"
          ></van-radio>
        </li>
        <li>
          <img src="../../../assets/dingdanxinxi/zhifubao.jpg" alt="" />
          <span>{{ fukuan[1].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="支付宝"
            name="支付宝"
          ></van-radio>
        </li>
        <li>
          <img src="../../../assets/dingdanxinxi/weixin.jpg" alt="" />
          <span>{{ fukuan[2].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="微信"
            name="微信"
          ></van-radio>
        </li>
      </ul>
    </van-radio-group>
    <div class="tongyi_yuedu">
      <van-checkbox
        class="ckecked_tongyi_ground_btn"
        v-model="checked"
        shape="square"
      />
      <span>同意</span>
      <span>《平价分时租车租赁协议》</span>
    </div>
    <van-button
      :disabled="!checked"
      class="buton_botom"
      type="info"
      @click="fukuantotongzhi">
      {{ radio }}
    </van-button>

<!--弹框-->
    <van-dialog
            v-model="show"
            title="支付"
            :show-cancel-button=true
            :overlay=true
            :close-on-click-overlay=true
            @cancel="cancel"
            @confirm="confirm"
    >
      <div>
        <vue-qr class="code" :text="message" :logoScale="50" :size="150" :margin="150"></vue-qr>
      </div>
    </van-dialog>


      <!--余额确定支付弹框-->
      <van-dialog
              v-model="show1"
              :show-cancel-button=true
              :overlay=true
              :close-on-click-overlay=true
              @cancel="cancel1"
              @confirm="confirm2"
      >
          <div class="queding">
              <h2>再次确定车辆租出</h2>
          </div>
      </van-dialog>
    <van-dialog v-model="dialogVisible" :show-cancel-button="true">
      <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
        <vue-qr
                :text="message"
                :margin="0"
                colorDark="green"
                :logoSrc="require('@/assets/logo.png')"
                colorLight="#fff"
                :size="200">
        </vue-qr>
      </div>
    </van-dialog>


  </div>
</template>

<script>
import { pay } from "../../../request/userinfo/userinfo";
import { Notify } from 'vant';
import bus from '../../../assets/js/bus.js'
import VueQr from "vue-qr";
export default {
  props: {},
  data() {
    return {
      radio: "账户余额",
      checked: false,
      fukuan: [{ text: "账户余额" }, { text: "支付宝" }, { text: "微信" }],
      car:{},
      coupon:{},
      passitem:'',
      timer:'',
      dialogVisible:false,
      message:"",
      show:false,
      show1:false,
      requestParams:{},
      order:{},
      integrationHistoryVo:{},
      flag:false,
        temp:''
    };
  },
  created() {
    this.car=this.$root.car;
    this.order=this.$root.order
    console.log("=============================付钱页面")
    console.log(this.order)
    bus.$on('passitem',(val)=>{
      this.coupon = val;
      console.log(val)
    });
  },
    watch: {
        // 监听数据变化
        coupon: {
            handler: function(o,u) {
                console.log('数据更新', o, u)
                this.flag = o !== undefined;
                console.log(this.flag)
                if (o === undefined){this.coupon = {};}
                this.price();
            }, deep: true
        }
    },

  methods: {
      discountCoupon(){
          if (this.flag){
              this.$http.get("/coupon/web/couponHistory/useCoupon/"+this.coupon.id+"/"+this.$root.order.orderNo).then(res=>{
              });
          }
      },
      cancel1(){
          this.show1=false;
      },
      confirm2(){
          this.show1=false;

          console.log(this.integrationHistoryVo)
          this.$http.get("/client/IntegrationHistory/web/payCarUpdateClient/"+this.$root.order.orderNo).then(res=>{
              if (res.data.code === 200){
                  //this.$message.success(res.data.data)
              }
              this.$http.post("/car/api/order/updateOrders",this.$root.order).then(res=>{
                  this.$message.success(res.data.msg)
                  this.discountCoupon()
                  //支付成功延时跳转
                  this.temp=setInterval(()=>{
                      clearInterval(this.temp)
                      this.$router.push("/skip")
                  },3000);
              });
          });

      },
    confirm(){
      this.show=false;
      this.$http.post("/ali/payApp/return",this.$root.order).then(res=>{
        console.log("=================================支付验证")
        if (res.data.code===200){
            this.discountCoupon()
          this.$message.success(res.data.msg);

        }
        if (res.data.code===2001){
          this.$message.error(res.data.msg);
            //支付成功延时跳转
            this.temp=setInterval(()=>{
                clearInterval(this.temp)
                this.$router.push("/wodedingdan")
            },3000);
        }
      });

    },
    cancel(){
      this.show=false;
      this.$http.post("/ali/payApp/return",this.$root.order).then(res=>{
        console.log("=================================取消验证")
        if (res.data.code===200){
          this.$message.success(res.data.msg);
            this.discountCoupon()
        }
        if (res.data.code===2001){
          this.$message.error(res.data.msg);
            //支付成功延时跳转
            this.temp=setInterval(()=>{
                clearInterval(this.temp)
                this.$router.push("/wodedingdan")
            },3000);
        }
      });
    },
      //查询订单状态
      queryPayStatus(orderNo){
          this.$http.get("/payment/weixin/queryPayStatus/"+orderNo).then(resp=>{
              if(resp.data.code===200){
                  //消除定时器
                  clearInterval(this.timer)
                  this.timer=null;
                  this.$message.success("支付成功");
                  this.show=false;
                  this.$http.post("/car/api/order/updateOrders",this.$root.order).then(res=>{
                      this.$message.success(res.data.msg)
                      this.discountCoupon()
                      //支付成功延时跳转
                      this.temp=setInterval(()=>{
                          clearInterval(this.temp)
                          this.$router.push("/skip")
                      },3000);
                  });
              }else {
                  this.$message.success(this.data.msg);
              }
          })
      },

    fukuantotongzhi(){
      console.log(this.$root.order)
      console.log(this.radio)
      if (this.radio==="账户余额"){
        console.log("=================================账户余额")
        this.$http.get("/client/IntegrationHistory/web/getInitialHistory").then(res=>{
            let money=res.data.accountBalance;
            if (money>=this.$root.order.totalPrice){
                this.integrationHistoryVo.orderNo=this.$root.order.orderNo
                this.integrationHistoryVo.amount=this.$root.order.totalPrice
                this.integrationHistoryVo.count=this.$root.order.totalPrice*0.01
                this.integrationHistoryVo.status=3
                this.integrationHistoryVo.operateNote="余额支付"
                this.$http.post("/client/IntegrationHistory/web/payCarCreateHistory",this.integrationHistoryVo).then(res=>{
                    // this.$message.success(res.data.data)
                });
                console.log("11111111111111111111111余额充足")
                this.show1=true
            }else {
                this.$message.error("余额不足");
            }
            console.log(res)
        })

      } else if (this.radio==="微信"){

        console.log("=================================微信")
        this.requestParams.orderNo=this.$root.order.orderNo
        this.requestParams.money=this.$root.order.totalPrice
        this.requestParams.describe="租车金额"
        this.requestParams.returnUrl="121555"
        console.log(this.requestParams)
        this.$http.post("/payment/weixin/payExistingOrder",this.requestParams).then(res=>{
            this.message = res.data.data.codeUrl
          console.log("=================================微信")
          console.log(res.data.data.codeUrl)
          // this.$router.push({path:"/dingdantongzhi",query:{cord:res.data.data}})
          this.show=true;
            this.timer = setInterval(() => {
                this.queryPayStatus(this.$root.order.orderNo)
            }, 9000);

        });

      } else if (this.radio=="支付宝"){
        console.log("=================================支付宝")
        console.log(this.$root.order)
        this.$http.post("/ali/payApp/aliPay",this.$root.order).then(res=>{
          console.log("=================================支付宝")
          console.log(res)
          // this.$router.push({path:"/dingdantongzhi",query:{cord:res.data.data}})
          this.message=res.data.data
          this.show=true;
            this.timer = setInterval(() => {
                this.$http.post("ali/payApp/return",this.$root.order).then(res=>{
                    if (res.data.code===200){
                        this.show=false;
                        //消除定时器
                        clearInterval(this.timer)
                        this.$message.success(res.data.msg);
                        this.discountCoupon()
                        //支付成功延时跳转
                        this.temp=setInterval(()=>{
                            clearInterval(this.temp)
                            this.$router.push("/skip")
                        },3000);
                    }
                });
            }, 9000);
        });
      }
    },
    //fukuantotongzhi() {
      // // "2020-11-26 08:18:55 "
      // let stime = this.$store.state.startime_;
      // let etime = this.$store.state.endtime_;
      // let new_stime = stime.getFullYear()+"-"+(stime.getMonth()+1)+"-"+stime.getDate()+" "+new Date().getHours()+":"
      //                 +new Date().getMinutes()+":"+
      //                 new Date().getSeconds();
      // let new_etime = etime.getFullYear()+"-"+(etime.getMonth()+1)+"-"+etime.getDate()+" "+new Date().getHours()+":"
      //                 +new Date().getMinutes()+":"+
      //                 new Date().getSeconds();
      //
      // if(this.car.price>this.$store.state.user.accountBalance){
      //   Notify({ type: 'danger', message: '余额不足请充值' })
      //   this.$router.push('/wallet')
      // }else{
      //   pay({
      //   brrowShop: this.$store.state.brrowShop,//门店id
      //   carId: this.$store.state.carinfo.id,     //车id
      //   clientId: this.$store.state.user.id,   //用户id
      //   endTime: new_etime,
      //   isgetcarathome: "string",
      //   isreturncarathome: "string",
      //   payType: 2,
      //   preparidAmount: this.z_money,
      //   returnShop: 1,
      //   startTime: new_stime,
      //   state: 4,
      //   totalPrice: this.z_money,  //支付金额
      // }).then(this.$router.push("/dingdantongzhi"));
      //}
    //},

    price() {
        console.log("--------=============------------")
        console.log(this.$root.order.preparidAmount)
        console.log(this.$root.order.totalPrice)
        console.log("--------=============------------")
      let officialPrice = this.$root.order.preparidAmount;
      if (this.coupon.value !== null && officialPrice - this.coupon.value*0.01 > 0){
        officialPrice = officialPrice - this.coupon.value*0.01;
      }else if (this.coupon.originCondition != null && car.price > this.coupon.originCondition/100){
        officialPrice = officialPrice = this.coupon.denominations/100
      }else if (this.coupon.discount != null){
        officialPrice = officialPrice * (this.coupon.discount * 0.1)
      }
      console.log("=========officialPrice========")
      this.$root.order.totalPrice=officialPrice
      return officialPrice
    },
  },
  mounted() {
    let money = this.$store.state.carinfo.price;
    let stime = this.$store.state.startime_;
    let etime = this.$store.state.endtime_;
    let time = (etime - stime) / 24 / 60 / 60 / 1000;
    this.z_money = (money - 0) * time;
    // console.log(this.$store.state.carinfo.id)
  },
  components: {
    VueQr
  },
};
</script>

<style scoped lang="less">
    .queding{
        margin-left: 95px;
        line-height: 110px;
    }
  .code{
    margin-left: 85px;
  }
.dingjin {
  width: 100%;
  margin-top: 0.05rem;
  font-size: 0;
  .yingfu {
    width: 95%;
    height: 0.73rem;
    margin: 0 auto;
    border-radius: 0.08rem;
    background: white;
    line-height: 0.73rem;
    padding-left: 0.15rem;
    span {
      font-size: 0.25rem;
      font-weight: 600;
    }
    span:last-child {
      color: #f0230e;
    }
  }
  .fuzhang {
    width: 95%;
    height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-top: 0.25rem;
    position: relative;
    li {
      flex: 1;
      display: flex;
      align-items: center;
      img {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 0.08rem;
      }
      span {
        font-size: 0.26rem;
        margin-left: 0.26rem;
        font-weight: 600;
      }
    }
  }
  .tongyi_yuedu {
    width: 95%;
    margin: 0.27rem auto 0.6rem auto;
    display: flex;
    align-items: center;
    span:nth-child(2) {
      font-size: 0.22rem;
      color: #666;
      margin-left: 0.2rem;
    }
    span:last-child {
      font-size: 0.23rem;
      color: #4395ff;
      margin-left: 0.29rem;
    }
  }
  .buton_botom {
    width: 100%;
    height: 0.81rem;
    background: #4395ff;
    color: white;
    font-size: 0.29rem;
  }
}
</style>
